<template>
  <div class="app-container">
    <!-- 表单 -->
    <div class="app-container-search">
      <el-form size="small" :model="form" :inline="true" label-width="90px">
        <!-- <el-form-item label="产品key:">
          <el-input v-model="form.userName" placeholder="请输入" style="width:180px;" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="产品名称:">
          <el-input v-model="form.detail" placeholder="请输入" style="width:180px;" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="getDataList"></el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" icon="el-icon-refresh" @click="reset"></el-button>
        </el-form-item>
      </el-form>
    </div>


    <div class="app-container-search handle">
      <el-form size="small" :inline="true" label-width="90px">
        <el-form-item>
          <el-button size="small" icon="el-icon-plus" type="primary" @click="openDialog">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <el-radio-group v-model="tabPosition" class="tabPosition">
        <el-radio-button label="list"><i class="el-icon-s-operation"></i></el-radio-button>
        <el-radio-button label="pic"><i class="el-icon-menu"></i></el-radio-button>
      </el-radio-group>
    </div>



    <div class="picBox" v-show="tabPosition == 'pic'">
      <div class="picBoxItem" v-for="item in tableData" :key="item.productKey">
        <img class="picBoxImg" src="../../../../assets/img/chanpin.png" alt="">
        <div class="picBoxItemLine">
          <img class="picBoxItemLogo" src="../../../../assets/img/logo.png" alt="">
          <div class="picBoxItemName">{{ item.productName }}</div>
        </div>
        <div class="picBoxItemLine">
          <div class="picBoxItemTitle">节点类型</div>
          <div class="picBoxItemText" v-show="item.noteType == 1">设备</div>
          <div class="picBoxItemText" v-show="item.noteType == 2">网关</div>
        </div>
        <div class="picBoxItemLine">
          <div class="picBoxItemTitle">接入方式</div>
          <div class="picBoxItemText" v-show="item.accessType == 1">设备直连</div>
          <div class="picBoxItemText" v-show="item.accessType == 2">网关接入</div>
          <div class="picBoxItemText" v-show="item.accessType == 3">南向云接入</div>
          <div class="picBoxItemText" v-show="item.accessType == 4">5G定制网</div>
        </div>
        <div class="picBoxItemLine">
          <div class="picBoxItemTitle">网络类型</div>
          <div class="picBoxItemText" v-show="item.networkType == 1">WIFI</div>
          <div class="picBoxItemText" v-show="item.networkType == 2">移动蜂窝数据</div>
          <div class="picBoxItemText" v-show="item.networkType == 3">NB-IoT</div>
          <div class="picBoxItemText" v-show="item.networkType == 4">以太网</div>
          <div class="picBoxItemText" v-show="item.networkType == 5">蓝牙</div>
          <div class="picBoxItemText" v-show="item.networkType == 6">ZigBee</div>
        </div>
        <div class="picLine"></div>
        <div class="picBtnBox">
          <el-button size="mini" type="primary" plain class="picBtn" @click="openChange(item)"><i
              class="el-icon-edit"></i> 编辑</el-button>
          <el-button size="mini" type="warning" plain class="picBtn" @click="lookDetail(item.productId)"><i
              class="el-icon-view"></i> 详情</el-button>
          <el-button v-show="item.masterKey" size="mini" type="danger" plain class="picBtnDelete"
            @click="deleteProduct(item)"><i class="el-icon-delete"></i></el-button>
          <el-button size="mini" type="success" plain class="picBtn" @click="openDevice(item)"><i
              class="el-icon-c-scale-to-original"></i>
            添加设备</el-button>

        </div>
      </div>
    </div>





    <!-- 表格 -->
    <el-table size="medium" ref="multipleTable" :data="tableData" border style="width: 100%"
      @selection-change="handleSelectionChange" v-show="tabPosition == 'list'">
      <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
      <el-table-column prop="noteType" label="节点类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.noteType == 1">设备</span>
          <span v-if="scope.row.noteType == 2">网关</span>
        </template>
      </el-table-column>
      <el-table-column prop="accessType" label="接入方式" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.accessType == 1">设备直连</span>
          <span v-if="scope.row.accessType == 2">网关接入</span>
          <span v-if="scope.row.accessType == 3">南向云接入</span>
          <span v-if="scope.row.accessType == 4">5G定制网</span>
        </template>
      </el-table-column>
      <el-table-column prop="networkType" label="网络类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.networkType == 1">WIFI</span>
          <span v-if="scope.row.networkType == 2">移动蜂窝数据</span>
          <span v-if="scope.row.networkType == 3">NB-IoT</span>
          <span v-if="scope.row.networkType == 4">以太网</span>
          <span v-if="scope.row.networkType == 5">蓝牙</span>
          <span v-if="scope.row.networkType == 6">ZigBee</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="100"></el-table-column>
      <el-table-column prop="productDesc" label="产品描述" align="center"></el-table-column>
      <el-table-column prop="" label="操作" align="center" width="150">
        <template slot-scope="scope">
          <div style="width: 100%;display:flex;justify-content: space-around;">
            <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
              <i class="el-icon-view" style="color: #1890FF;" @click="lookDetail(scope.row.productId)"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
              <i class="el-icon-edit-outline" style="color: #1890FF;"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <i class="el-icon-delete" style="color: red;"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="消息订阅" placement="top-start">
              <i class="el-icon-chat-dot-square" style="color: #1890FF;" @click="openMessage(scope.row)"></i>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->


    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>



    <!-- 添加编辑弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogHandle" width="60%">
      <div class="handleBox">
        <el-form :label-position="labelPosition" label-width="100px">
          <el-form-item label="产品名称:">
            <el-input :disabled="title == '详情'" v-model="formHandle.productName" placeholder="请输入" clearable
              style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="一级分类:" v-show="title != '编辑'">
            <el-input :disabled="title == '详情'" v-model="formHandle.productType" placeholder="请输入" clearable
              style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="二级分类:" v-show="title != '编辑'">
            <el-input :disabled="title == '详情'" v-model="formHandle.secondaryType" placeholder="请输入" clearable
              style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="三级分类:" v-show="title != '编辑'">
            <el-input :disabled="title == '详情'" v-model="formHandle.thirdType" placeholder="请输入" clearable
              style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="产品描述:">
            <el-input :disabled="title == '详情'" type="textarea" v-model="formHandle.productDesc" placeholder="请输入"
              clearable style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="创建者:" v-show="title != '编辑'">
            <el-input :disabled="title == '详情'" v-model="formHandle.createBy" placeholder="请输入" clearable
              style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="更新操作者:" v-show="title == '编辑'">
            <el-input v-model="formHandle.updateBy" placeholder="请输入" clearable style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="masterKey:" v-show="title == '编辑'">
            <el-input :disabled="formHandle.masterKey" v-model="formHandle.masterKey" placeholder="请输入" clearable
              style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="设备型号:" v-show="title != '编辑'">
            <el-input :disabled="title == '详情'" v-model="formHandle.tupDeviceModel" placeholder="请输入" clearable
              style="width:90%;"></el-input>
          </el-form-item>
          <el-form-item label="节点类型" v-show="title != '编辑'">
            <el-radio-group :disabled="title == '详情'" v-model="formHandle.nodeType">
              <el-radio label="1">设备</el-radio>
              <el-radio label="2">网关</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="接入方式" v-show="title != '编辑'">
            <el-radio-group :disabled="title == '详情'" v-model="formHandle.accessType">
              <el-radio label="1">设备直连</el-radio>
              <el-radio label="2">网关接入</el-radio>
              <el-radio label="3">南向云接入</el-radio>
              <el-radio label="4">5G定制网</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="网络类型" v-show="title != '编辑'">
            <el-radio-group :disabled="title == '详情'" v-model="formHandle.networkType">
              <el-radio label="1">WIFI</el-radio>
              <el-radio label="2">移动蜂窝数据</el-radio>
              <el-radio label="3">NB-IoT</el-radio>
              <el-radio label="4">以太网</el-radio>
              <el-radio label="5">蓝牙</el-radio>
              <el-radio label="6">ZigBee</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="协议类型" v-show="title != '编辑'">
            <el-radio-group :disabled="title == '详情'" v-model="formHandle.productProtocol">
              <el-radio label="1">tlink</el-radio>
              <el-radio label="2">MQTT</el-radio>
              <el-radio label="3">LWM2M</el-radio>
              <el-radio label="5">HTTP</el-radio>
              <el-radio label="6">JT/T808</el-radio>
              <el-radio label="7">TCP</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="认证方式" v-show="title != '编辑'">
            <el-radio-group :disabled="title == '详情'" v-model="formHandle.authType">
              <el-radio label="1">特征串认证</el-radio>
              <el-radio label="2">SM9认证</el-radio>
              <el-radio label="3">证书认证</el-radio>
              <el-radio label="4">IMEI认证</el-radio>
              <el-radio label="6">SM2认证</el-radio>
              <el-radio label="7">IPV6标识认证</el-radio>
              <el-radio label="8">HTTP基本认证</el-radio>
              <el-radio label="9">HTTP摘要认证</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="数据加密方式" v-show="title != '编辑'">
            <el-radio-group :disabled="title == '详情'" v-model="formHandle.dataEncryption">
              <el-radio label="1">sm1</el-radio>
              <el-radio label="2">sm2</el-radio>
              <el-radio label="3">sm4</el-radio>
              <el-radio label="4">dtls</el-radio>
              <el-radio label="5">明文</el-radio>
              <el-radio label="6">量子加密</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="安全类型" v-show="title != '编辑'">
            <el-radio-group :disabled="title == '详情'" v-model="formHandle.encryptionType">
              <el-radio label="0">一机一密</el-radio>
              <el-radio label="1">一型一密</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否透传" v-show="title != '编辑'">
            <el-radio-group :disabled="title == '详情'" v-model="formHandle.tupIsThrough">
              <el-radio label="0">透传</el-radio>
              <el-radio label="1">非透传</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="消息格式" v-show="title != '编辑'">
            <el-radio-group :disabled="title == '详情'" v-model="formHandle.payloadFormat">
              <el-radio label="1">json</el-radio>
              <el-radio label="2">紧凑二进制</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" v-show="title != '详情'">
        <el-button @click="dialogHandle = false">取 消</el-button>
        <el-button type="primary" @click="comfirmBtn">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 新增设备弹窗 -->
    <el-dialog title="新增设备" :visible.sync="dialogDevice" width="50%">
      <el-form :label-position="labelPosition" label-width="100px">
        <el-form-item label="设备名称:">
          <el-input v-model="formDevice.deviceName" placeholder="请输入" clearable style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="设备编号:">
          <el-input v-model="formDevice.deviceSn" placeholder="请输入" clearable style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="操作者:">
          <el-input v-model="formDevice.operator" placeholder="请输入" clearable style="width:90%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDevice = false">取 消</el-button>
        <el-button type="primary" @click="addDevice">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 新增消息订阅弹窗 -->
    <el-dialog title="消息订阅" :visible.sync="dialogMessage" width="50%">
      <el-form :label-position="labelPosition" label-width="110px">
        <el-form-item label="消息类型">
          <el-checkbox-group v-model="formMessage.subTypes">
            <el-checkbox label="1">设备数据变化通知</el-checkbox>
            <el-checkbox label="2">设备响应命令通知</el-checkbox>
            <el-checkbox label="3">设备事件上报</el-checkbox>
            <el-checkbox label="4">设备上下线通知</el-checkbox>
            <el-checkbox label="5">创建删除设备</el-checkbox>
            <el-checkbox label="9">TUP合并数据上报</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="订阅级别">
          <el-radio-group v-model="formMessage.subLevel">
            <el-radio label="1">产品级</el-radio>
            <el-radio label="2">设备级</el-radio>
            <el-radio label="3">分组级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设备id:">
          <el-input v-model="formMessage.deviceId" placeholder="请输入" clearable style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="设备分组id:">
          <el-input v-model="formMessage.deviceGroupId" placeholder="请输入" clearable style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="消息接收路径:">
          <el-input v-model="formMessage.subUrl" placeholder="请输入" clearable style="width:90%;"></el-input>
        </el-form-item>
        <el-form-item label="操作人:">
          <el-input v-model="formMessage.operator" placeholder="请输入" clearable style="width:90%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMessage = false">取 消</el-button>
        <el-button type="primary" @click="addMessage">确 定</el-button>
      </div>
      <el-button type="primary" @click="openHistory">订阅历史</el-button>
    </el-dialog>


    <!-- 订阅历史弹窗 -->
    <el-dialog title="订阅历史" :visible.sync="dialogHistory" width="70%">
      <el-table size="medium" :data="historyList" border style="width: 100%">
        <el-table-column prop="subUrl" label="消息接收路径" align="center"></el-table-column>
        <el-table-column prop="subLevel" label="订阅级别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.subLevel == 1">产品级</span>
            <span v-if="scope.row.subLevel == 2">设备级</span>
            <span v-if="scope.row.subLevel == 3">分组级</span>
          </template>
        </el-table-column>
        <el-table-column prop="subType" label="订阅类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.subType == 1">设备数据变化通知</span>
            <span v-if="scope.row.subType == 2">设备响应命令通知</span>
            <span v-if="scope.row.subType == 3">设备事件上报</span>
            <span v-if="scope.row.subType == 4">设备上下线通知</span>
            <span v-if="scope.row.subType == 5">创建删除设备</span>
            <span v-if="scope.row.subType == 9">TUP合并数据上报</span>
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="操作人" align="center"></el-table-column>
        <el-table-column prop="createTime" label="订阅时间" align="center"></el-table-column>
        <el-table-column prop="" label="操作" align="center" width="150">
          <template slot-scope="scope">
            <div style="width: 100%;display:flex;justify-content: space-around;">
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <i @click="removeMessage(scope.row)" class="el-icon-delete" style="color: red;"></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


    <!-- 物模型弹窗 -->
    <el-dialog title="产品物模型" :visible.sync="showModel" width="70%">
      <el-tabs type="border-card">
        <el-tab-pane label="功能列表">
          <div class="app-container-search handle">
            <el-form size="small" :inline="true" label-width="90px">
              <el-form-item>
                <el-button size="small" icon="el-icon-plus" type="primary">新增</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table size="medium" border style="width: 100%">
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="productKey" label="功能类型" align="center">
            </el-table-column>
            <el-table-column prop="productName" label="功能名称" align="center"></el-table-column>
            <el-table-column prop="deviceCount" label="描述" align="center"></el-table-column>
            <el-table-column prop="authType" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="dataFormat" label="标识符" align="center">
            </el-table-column>
            <el-table-column prop="gmtCreate" label="数据类型" align="center"></el-table-column>
            <el-table-column prop="description" label="数据定义" align="center"></el-table-column>
            <el-table-column prop="description" label="操作" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="TSL">

        </el-tab-pane>
        <el-tab-pane label="型号配置">
          <div class="app-container-search handle">
            <el-form size="small" :inline="true" label-width="90px">
              <el-form-item>
                <el-button size="small" icon="el-icon-plus" type="primary">新增</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table size="medium" border style="width: 100%">
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="productKey" label="型号" align="center">
            </el-table-column>
            <el-table-column prop="productName" label="名称" align="center"></el-table-column>
            <el-table-column prop="deviceCount" label="脚本状态" align="center"></el-table-column>
            <el-table-column prop="authType" label="修改时间" align="center">
            </el-table-column>
            <el-table-column prop="description" label="操作" align="center"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>

  </div>
</template>

<script>
import { getList, addProduct, deleteProduct, lookDetail, changeProduct, addDevice, addMessage, messageList, removeMessage } from '@/api/MaintainView/MaintainForm/index.js'

import { getProblemType } from '@/api/MaintainView/MaintainType/index.js'

export default {
  data() {
    return {
      dialogHistory: false,
      dialogMessage: false,
      dialogDevice: false,
      showModel: false,
      dialogHandle: false,
      title: "",
      tabPosition: "pic",
      labelPosition: "right",
      form: {
        current: 0,
        pageSize: 10,
      },
      formHandle: {

      },
      formDevice: {

      },
      formMessage: {
        subTypes: []
      },
      formHistory: {
        productId: "",
        masterKey: "",
        pageNow: 0,
        pageSize: 10,

      },
      historyList: [],
      tableData: [],
      CampusList: [],
      buildName: [],
      ProblemType: [],
      MaintainerList: [],
      timeNow: "",
      total: 0,
      fileList: [],

    }
  },

  methods: {
    removeMessage(e) {
      this.$confirm('此操作将删除该订阅, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeMessage(
          {
            subId: e.subId,
            masterKey: this.formHistory.masterKey,
            productId: this.formHistory.productId,
            deviceId: e.deviceId,
            subLevel: e.subLevel,
          }).then(res => {
            if (res.data.success == true) {
              this.$message({
                message: '删除成功!',
                duration: 1000,
                type: 'success',
                onClose: () => {
                  this.openHistory()
                }
              })
            } else {
              this.$message({
                message: res.data.message,
                duration: 2000,
              })
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    openHistory() {
      messageList(this.formHistory).then(res => {
        if (res.data.success == true) {
          this.historyList = res.data.data.result.list
          this.dialogHistory = true
        }
      })
    },
    openMessage(e) {
      this.dialogMessage = true
      this.formMessage.masterKey = e.masterKey
      this.formMessage.productId = e.productId
      this.formHistory.masterKey = e.masterKey
      this.formHistory.productId = e.productId
    },
    addMessage() {
      addMessage(this.formMessage).then(res => {
        if (res.data.success == true) {
          this.$message.success('新增成功')
          this.dialogMessage = false
        }
      })
    },
    openDevice(e) {
      this.dialogDevice = true
      this.formDevice.masterKey = e.masterKey
      this.formDevice.productId = e.productId
    },
    addDevice() {
      addDevice(this.formDevice).then(res => {
        if (res.data.success == true) {
          this.$message.success('新增成功')
          this.dialogDevice = false

        }
      })
    },
    lookDetail(e) {
      lookDetail({ productID: e }).then(res => {
        if (res.data.success == true) {
          this.title = '详情'
          this.formHandle = res.data.data.result
          this.formHandle.productType = res.data.data.result.productTypeValue
          this.formHandle.secondaryType = res.data.data.result.secondaryTypeValue
          this.formHandle.thirdType = res.data.data.result.thirdTypeValue
          this.formHandle.nodeType = res.data.data.result.nodeType.toString()
          this.formHandle.accessType = res.data.data.result.accessType.toString()
          this.formHandle.networkType = res.data.data.result.networkType.toString()
          this.formHandle.productProtocol = res.data.data.result.productProtocol.toString()
          this.formHandle.authType = res.data.data.result.authType.toString()
          this.formHandle.dataEncryption = res.data.data.result.dataEncryption.toString()
          this.formHandle.encryptionType = res.data.data.result.encryptionType.toString()
          this.formHandle.tupIsThrough = res.data.data.result.tupIsThrough.toString()
          this.formHandle.payloadFormat = res.data.data.result.payloadFormat.toString()
          this.dialogHandle = true
        }
      })
    },
    openModel() {
      this.showModel = true
    },
    handleSelectionChange() {

    },
    deleteProduct(e) {
      this.$confirm('此操作将删除该产品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProduct({ masterKey: e.masterKey, productId: e.productId }).then(res => {
          if (res.data.success == true) {
            this.$message({
              message: '删除成功!',
              duration: 1000,
              type: 'success',
              onClose: () => {
                this.getList()
              }
            })
          } else {
            this.$message({
              message: res.data.message,
              duration: 2000,
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    openDialog() {
      this.title = '新增'
      this.dialogHandle = true
      this.formHandle = {}
    },
    openChange(e) {
      this.formHandle = e
      this.title = '编辑'
      this.dialogHandle = true
    },
    comfirmBtn() {
      if (this.formHandle.productId) {
        changeProduct(this.formHandle).then(res => {
          if (res.data.success == true) {
            this.$message.success('修改成功！')
            this.dialogHandle = false
            this.getList()
          }
        })
      } else {
        this.formHandle.nodeType = Number(this.formHandle.nodeType)
        this.formHandle.accessType = Number(this.formHandle.accessType)
        this.formHandle.networkType = Number(this.formHandle.networkType)
        this.formHandle.productProtocol = Number(this.formHandle.productProtocol)
        this.formHandle.authType = Number(this.formHandle.authType)
        this.formHandle.dataEncryption = Number(this.formHandle.dataEncryption)
        this.formHandle.encryptionType = Number(this.formHandle.encryptionType)
        this.formHandle.tupIsThrough = Number(this.formHandle.tupIsThrough)
        this.formHandle.payloadFormat = Number(this.formHandle.payloadFormat)
        addProduct(this.formHandle).then(res => {
          if (res.data.success == true) {
            this.$message.success('新增成功！')
            this.dialogHandle = false
            this.getList()
          }
        })
      }
    },

    //重置
    reset() {
      this.form = {
        campusId: "",
        createTime: "",
        current: 0,
        field: "",
        finishedTime: "",
        order: "",
        pageSize: 10,
        problemId: "",
        status: "",
        workerId: ""
      }
      this.getForm()
    },
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss;
      console.log(_this.gettime)
      this.timeNow = _this.gettime
    },
    // 下载模板
    downLoad() {
      downLoad().then(res => {
        const link = document.createElement('a')  //创建a标签
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) //设置文件流
        link.style.display = 'none'// 设置连接
        link.href = URL.createObjectURL(blob)  //将文件流转化为blob地址
        this.getCurrentTime()
        link.download = '维修单模板_' + this.timeNow
        document.body.appendChild(link) // 模拟点击事件
        link.click()  //设置点击事件
        this.$message.success('下载成功！')
      })
    },
    //导出维修单信息
    exportForm() {
      exportForm(this.form).then(res => {
        const link = document.createElement('a')  //创建a标签
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) //设置文件流
        link.style.display = 'none'// 设置连接
        link.href = URL.createObjectURL(blob)  //将文件流转化为blob地址
        this.getCurrentTime()
        link.download = '维修单统计报表_' + this.timeNow
        document.body.appendChild(link) // 模拟点击事件
        link.click()  //设置点击事件
        this.$message.success('导出成功！')

        // let dis = res.headers["content-disposition"]
        // console.log(dis,"12121212121212121");
        // let fileName = dis.split('attachment;filename=')[1]
        // fileName=decodeURIComponent(fileName)
        // console.log(fileName)
      })
    },
    beforeUpload(file) {
      // 校验
      let legalName = ["xlsx", "xls"];
      // 拿到后缀名
      let name = file.name.substring(
        file.name.lastIndexOf(".") + 1,
        file.name.length
      );
      if (legalName.includes(name)) {
      } else {
        this.$message.info("文件格式不对,仅限xls和xlsx");
        return false;
      }
    },
    // 导入维修单信息
    uploadHttpRequest(data) {
      let fd = new FormData()
      fd.append('file', data.file)
      uploadMaintain(fd).then(res => {
        if (res.data.success == true) {
          this.$message.success("导入成功！")
          this.reset()
        } else {
          this.$message({
            message: res.data.message,
            duration: 3000
          })
        }
      })

    },
    handleCurrentChange(e) {
      //当前页
      this.form.current = (e - 1) * 10
      this.getForm()
    },
    handleSizeChange(e) {
      this.form.pageSize = e
      this.getForm()

    },
    // 查询按钮
    getDataList() {
      this.form.current = 0
      this.getForm()
    },
    //查询列表
    getList() {
      getList(this.form).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.tableData = res.data.data
          this.total = 0
          this.$message.info(res.data.message)
        }
      })
    },

  },
  created() {
    this.getList()
  },
};
</script>
<style lang="scss" scoped>
.dialogbutton {
  margin-right: 40%;
}

.pagination {
  float: right;
  margin-top: 10px;
}

.handleBox {
  height: 500px;
  overflow-y: auto;
}
</style>
